<template>
  <div class="postDetail">
    <div class="article" v-if="postDetails && postDetails.type===1">
      <div class="article_topBar">
        <div class="iconfont iconarrow---left" @click="$router.back()"></div>

        <div class="img">
          <img src="@/assets/logo2.jpg" alt />
        </div>

        <div
          class="btn"
          :class="{ highLight : !postDetails.has_follow }"
          @click="handleFollow"
        >{{ postDetails.has_follow?'已关注':'关注' }}</div>
      </div>

      <div class="article_detail">
        <div class="title">{{ postDetails.title }}</div>

        <div class="article_from">
          <div class="from">{{ postDetails.user.nickname }}</div>
          <div class="date">{{ postDetails.create_date.split('T')[0] }}</div>
        </div>

        <div class="article_content" v-html="postDetails.content"></div>
      </div>
    </div>

    <div class="video" v-if="postDetails && postDetails.type===2">
      <div class="video_pic">
        <video
          class="player"
          :poster="postDetails.cover[0].url"
          src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
          controls
        ></video>
        <!-- <div class="iconfont iconshipin"></div> -->
      </div>

      <div class="video_topBar">
        <div class="userInfo">
          <div class="userInfo_left">
            <img :src="$axios.defaults.baseURL + postDetails.user.head_img" alt class="img" />
            <span>{{ postDetails.user.nickname }}</span>
          </div>
          <div
            class="followBtn"
            :class="{ highLight : !postDetails.has_follow }"
            @click="handleFollow"
          >{{ postDetails.has_follow?'已关注':'关注' }}</div>
        </div>

        <div class="video_title">{{ postDetails.title }}</div>
      </div>
    </div>

    <div class="btns">
      <div class="btn dianzan" :class="{dzHighLight:postDetails.has_like}" @click="handleLike">
        <div class="iconfont icondianzan1"></div>
        <span>{{ postDetails.like_length }}</span>
      </div>

      <div class="btn weixin">
        <div class="iconfont iconweixin"></div>
        <span>微信</span>
      </div>
    </div>

    <div class="goodComments">
      <div class="goodComments_title">精彩跟帖</div>

      <div class="goodComments_content" v-if="commentList">
        <Comment
          :commentData="comment"
          v-for="(comment,index) in commentList"
          :key="index"
          @reply="reply"
        />
      </div>

      <div class="goodComments_content" v-if="commentList.length===0">
        <div class="noPicBox">
          <img src="@/assets/noPic.jpg" alt class="noPic" />
        </div>
      </div>

      <div class="moreCommentBtn">
        <div class="btn" @click="$router.push('/moreComment/'+ $route.params.id)">更多跟帖</div>
      </div>

      <CommentArea ref="commentInput" :parentInfo="commentInfo" :postDetails="postDetails" @reloadComment="getComment"/>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/comment";
import CommentArea from "@/components/CommentArea";

export default {
  data() {
    return {
      postDetails: "",
      commentList: "",
      commentInfo: {}
    };
  },

  components: {
    Comment,
    CommentArea
  },

  created() {
    this.getPost();
    this.getComment();
  },

  methods: {
    getPost() {
      return this.$axios({
        url: "/post/" + this.$route.params.id
      }).then(res => {
        console.log("文章详情返回结果", res.data.data);

        this.postDetails = res.data.data;
      });
    },

    getComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
      }).then(res => {
        console.log("评论列表返回结果", res.data.data);
        const commentList = res.data.data;

        if (commentList.length > 3) {
          commentList.length = 3;
        }

        this.commentList = commentList;
        
        this.commentInfo = {}
        console.log(this.commentInfo);
      });
    },

    handleFollow() {
      if (this.postDetails.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postDetails.user.id
        }).then(res => {
          console.log("取消关注成功结果", res);
          const { message } = res.data;
          if (message === "取消关注成功") {
            this.$toast.success(message);
            this.postDetails.has_follow = false;
          }
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postDetails.user.id
        }).then(res => {
          console.log("关注成功结果", res);
          const { message } = res.data;
          if (message === "关注成功") {
            this.$toast.success(message);
            this.postDetails.has_follow = true;
          }
        });
      }
    },

    handleLike() {
      this.$axios({
        url: "/post_like/" + this.postDetails.id
      }).then(res => {
        console.log("点赞文章返回结果", res);
        if (this.postDetails.has_like) {
          this.postDetails.like_length -= 1;
          this.postDetails.has_like = false;
        } else {
          this.postDetails.like_length += 1;
          this.postDetails.has_like = true;

          this.$toast.success("点赞成功");
        }
      });
    },

    reply(commentInfo) {
      this.commentInfo = commentInfo;
      console.log("获取到了回复的id");

      this.$refs.commentInput.showTextarea();
    }
  }
};
</script>

<style lang="less" scoped>
.article {
  .article_topBar {
    display: flex;
    align-items: center;
    padding: 5.556vw;

    .img {
      flex: 1;
      img {
        width: 7.778vw;
        height: 7.778vw;
        object-fit: cover;
        padding-left: 2.222vw;
      }
    }

    .btn {
      width: 20vw;
      height: 7.778vw;
      line-height: 7.778vw;
      text-align: center;
      border-radius: 5.556vw;
      font-size: 3.333vw;
      color: #333;
      background: #ecedef;

      &.highLight {
        background: #f00;
        color: #fff;
      }
    }
  }

  .article_detail {
    padding: 1.111vw 5.556vw 5.556vw 5.556vw;

    .title {
      font-size: 5.556vw;
      font-weight: bold;
    }

    .article_from {
      display: flex;
      align-items: center;
      color: #868686;
      padding-top: 1.667vw;

      .date {
        padding-left: 2.222vw;
      }
    }

    .article_content {
      padding-top: 4.444vw;
      line-height: 8.333vw;
      color: #333;

      /deep/ img {
        max-width: 100%;
      }
    }
  }
}

.video {
  .video_pic {
    position: relative;
    .player {
      width: 100vw;
    }

    .iconshipin {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16.667vw;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .video_topBar {
    padding: 2.778vw;

    .userInfo {
      display: flex;
      align-items: center;

      .userInfo_left {
        flex: 1;
        display: flex;
        align-items: center;

        .img {
          width: 7.778vw;
          height: 7.778vw;
          object-fit: cover;
        }

        span {
          font-size: 3.889vw;
          padding-left: 1.667vw;
        }
      }

      .followBtn {
        width: 20vw;
        height: 7.778vw;
        line-height: 7.778vw;
        background: #ecedef;
        text-align: center;
        border-radius: 5.556vw;
        font-size: 3.333vw;

        &.highLight {
          background: #f00;
          color: #fff;
        }
      }
    }

    .video_title {
      padding-top: 4.444vw;
      font-size: 5vw;
      font-weight: bold;
    }
  }
}

.btns {
  display: flex;
  justify-content: space-between;
  padding: 2.778vw 18.889vw 4.444vw 18.889vw;
  box-sizing: border-box;
  border-bottom: 1.111vw solid #e4e4e4;

  .btn {
    display: flex;
    justify-content: space-between;
    width: 23.333vw;
    height: 8.333vw;
    line-height: 8.333vw;
    border: 0.278vw solid #797979;
    border-radius: 4.444vw;
    padding: 0 4.444vw;
    box-sizing: border-box;

    &.dianzan {
      .icondianzan1 {
        font-size: 4.444vw;
      }

      span {
        font-size: 3.889vw;
      }

      &.dzHighLight {
        border: 0.278vw solid #f00;
        color: red;
      }
    }

    &.weixin {
      span {
        font-size: 3.889vw;
        color: 3.889vw;
      }

      .iconweixin {
        font-size: 5vw;
        color: #00c800;
      }
    }
  }
}

.goodComments {
  .goodComments_title {
    font-size: 5.556vw;
    text-align: center;
    padding: 8.333vw 0 2.778vw;
    font-weight: bold;
    color: #e64646;
  }

  .goodComments_content {
    .noPicBox {
      display: flex;
      align-items: center;
      justify-content: center;

      .noPic {
        width: 38.889vw;
      }
    }
  }

  .moreCommentBtn {
    display: flex;
    height: 40vw;
    justify-content: center;

    .btn {
      width: 41.667vw;
      height: 8.889vw;
      line-height: 8.889vw;
      border: 0.278vw solid #797979;
      border-radius: 4.444vw;
      text-align: center;
      font-size: 4.444vw;
      margin-top: 9.444vw;
    }
  }
}
</style>